<template>
  <div class="login">
    <div class="loginLogo center">
        <img src="../../assets/images/loginLogo.png" alt="">
    </div>

    <van-field v-model="phone" center clearable placeholder="输入手机号">
      <template #button>
        <van-button size="small" type="primary" class="btn" @click="getVal" color="#ff5f16" :disabled="able">获取验证码</van-button>
      </template>
    </van-field>
    <van-field v-model="pwd" center clearable placeholder="输入验证码"></van-field>
    <div class="submit">
    <van-button type="primary" size="large" color="#ff5f16" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>

export default {
  name: "login",
  data(){
      return{
        // 获取验证码后防止重复点击
        able:false,
          phone:"",
          pwd:""
      }
  },
  methods:{
      getVal(){
        this.able=true;
        // 5秒后恢复按钮
          setTimeout(() => {
            this.able=false
          }, 30000);
          let that = this;
          that
          .axios({
            method: "post",
            url: process.env.VUE_APP_BASE_URL,
            headers: {
              "X-Host": "mall.user.sms-code.send",
            },
            data: {
              mobile:that.phone,
              type:"1",
              imgCode:"",
              imgKey:"",
              
            },
          })
          .then((res) => {
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
      },
      login(){
        console.log("登录");
           let that = this;
          that
          .axios({
            method: "post",
            url: process.env.VUE_APP_BASE_URL,
            headers: {
              "X-Host": "mall.user.sms-code-login",
            },
            data: {
              mobile:that.phone,
              type:"1",
              imgCode:"",
              imgKey:"",
              smsCode:that.pwd,
            },
          })
          .then((res) => {
            console.log(res);       
            that.$store.commit("saveUserInfo",res.data.data)
            if(res.data.data){
              that.$router.push({
                name:"center",
              })
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
  }
};
</script>

<style scoped lang="scss">
.loginLogo{
    margin-top: 60px;
    margin-bottom: 20px;
img{
    width: 60px;
    height: 60px;
}
}
.btn{
    border: none;
}
.submit{
    margin-top: 60px;
}
</style>